<template>
    <div class="summary-item-container">
        <div v-show="canEdit" class="button-wrapper">
            <span :class="required ? 'active-text' : 'inactive-text'">必填</span>
            <el-switch :value="required" class="button" @change="handleChange" />
            <el-button class="button" type="text" icon="el-icon-edit-outline" @click="handleEdit"></el-button>
            <el-button class="button" type="text" icon="el-icon-delete" @click="handleDelete"></el-button>
        </div>
        <SummaryInput v-if="type === 'input'" :index="index" :label="label" :required="required" />
        <SummaryTextarea v-else-if="type === 'textarea'" :index="index" :label="label" :required="required" />
        <SummaryCheckbox v-else-if="type === 'checkbox'" :index="index" :label="label" :required="required" :options="options" />
        <SummaryRadio v-else-if="type === 'radio'" :index="index" :label="label" :required="required" :options="options" />
        <SummarySelect v-else-if="type === 'select'" :index="index" :label="label" :required="required" :options="options" />
    </div>
</template>

<script>
import SummaryInput from './SummaryInput.vue';
import SummaryTextarea from './SummaryTextarea.vue';
import SummaryCheckbox from './SummaryCheckbox.vue';
import SummaryRadio from './SummaryRadio.vue';
import SummarySelect from './SummarySelect.vue';
export default {
    components: {
        SummaryInput,
        SummaryTextarea,
        SummaryCheckbox,
        SummaryRadio,
        SummarySelect,
    },
    props: {
        type: {
            type: String,
            default: 'input', // textarea | checkbox | radio | input | select
        },
        index: {
            type: Number,
            default: 0,
        },
        label: {
            type: String,
            default: '',
        },
        options: {
            type: Array,
            default: () => {
                return [];
            },
        },
        required: {
            type: Boolean,
            default: false,
        },
        canEdit: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            isRequire: this.required
        };
    },
    watch: {
        required(newVal) {
            console.log('required', newVal);
			this.isRequire = newVal;
		},
    },
    methods: {
        handleEdit() {
            this.$emit('edit', this.index);
        },
        handleDelete() {
            this.$emit('delete', this.index);
        },
        handleChange(value) {
            this.$emit('required-change', {index: this.index, required: value })
        }
    },
};
</script>

<style scoped lang="less">
.summary-item-container {
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: #ffffff;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;

    .button-wrapper {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 24px;

        .button {
            margin-left: 10px;
            font-size: 16px;
        }

        .active-text {
            display: inline-block;
            color: #409EFF;
        }

        .inactive-text {
            display: inline-block;
            color: #909399;
        }

        .el-icon-edit-outline {
            font-size: 16px;
        }

        .el-icon-delete {
            font-size: 16px;
        }
    }

    .content-wrapper {
        display: flex;
        align-items: center;

        span {
            font-size: 16px;
            color: #303133;
        }

        .el-form-item {
            margin: 0 0 0 8px;
            width: 100%;
        }

        .el-input {
            width: auto;
        }
    }
}
</style>
